<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:>
<head>
    <meta charset="UTF-8">
  <th:block th:include="include :: header('我的订单')" />

</head>
<script>
    var deleteOid = -1;
    $(function () {
        $(".order-type a").click(function () {
            var orderStatus = $(this).attr("order-status");
            if('all'===orderStatus){
                $("table[order-status]").show();
            }else{
                $("table[order-status]").hide();
                $("table[order-status="+orderStatus+"]").show();
            }
            $(".order-type div").removeClass("selected");
            $(this).parent("div").addClass("selected");

        });
        $(".delete-button").click(function () {
            deleteOid = $(this).attr("oid");
            $("#confirmModal").modal('show');
        });
        $("#confirmDelete").click(function () {
            $("#confirmModal").modal("hide");
            var page = "deleteOrder";
            $.get(page,{"oid":deleteOid},function (result) {
                if(result === "success"){
                    $("table[oid="+deleteOid+"]").remove();
                }else{
                    alert("服务器错误，删除失败");
                }
            });
        });
        $("#cancelDelete").click(function () {
            $("#confirmModal").modal("hide");
        });
    });
</script>
<th:block th:include="include :: top" />
<body>
<section class="order-type">
  <div class="selected"><a href="#nowhere" order-status="all">所有订单</a></div>
  <div><a href="#nowhere" order-status="waitPay">待付款</a></div>
  <div><a href="#nowhere" order-status="waitDelivery">待发货</a></div>
  <div><a href="#nowhere" order-status="waitConfirm">待确认</a></div>
  <div><a href="#nowhere" order-status="waitComment">待评价</a></div>
</section>
<main class="order-list">
  <table class="head-table">
    <thead>
    <th >宝贝</th>
    <th width="100px">单价</th>
    <th width="100px">数量</th>
    <th width="150px">实付款</th>
    <th width="120px">交易操作</th>
    </thead>
  </table>
    <table class="line-table" th:each ="o,vs:${orders}" th:attr="order-status=${o.status},oid=${o.orderCode}" >
      <tr class="item-head" >
        <td colspan="2" class="time-and-order">
          <b th:text="${o.createDate}"></b>
          <span>订单号: <span th:text="${o.orderCode}"></span></span>
        </td>
        <td >
          <span class="seller"><img src="img/tmall-small.png"><span th:text="${website_name}"></span></span>
        </td>
        <td colspan="2">
          <span class="wangwang"></span>
        </td>
        <td class="delete" >
          <div th:if = "${o.status == 1 || o.status == 5 || o.status == 6 }" >
            <a href="#nowhere" class="delete-button" th:attr="oid=${o.orderCode}">
              <span class="glyphicon glyphicon-trash"></span>
            </a>
          </div>
        </td>
      </tr>
        <tr class="item-body" th:each="oi,vs2:${o.orderItems}">
          <td width="100px">
            <img src="img/赞美太阳.jpg" class="cart-item-jpg">
          </td>
          <td class="item-name">
            <a class="cart-item-title" href="product?id=${oi.id}"><span th:text="${oi.name}"></span></a>
            <div class="cart-item-title-bottom">
              <img title="保障卡" src="img/baozhang.png">
            </div>
          </td>
          <td width="100px" class="num-center">
            <span class="cart-item-old-price">￥<span th:text="${oi.Price}"></span></span>
            <span class="cart-item-now-price">￥<span th:text="${oi.Price}"></span></span>
          </td>
          <td width="100px" class="num-center border-left">
            <span class="order-item-num" th:text="${oi.number}"></span>
          </td>
          <div th:if="${vs2.count==1}">
            <td class="price-td" width="150px" rowspan="${o.totalNumber}">
              <span class="order-item-sum">￥<span th:text="${o.sum}"></span></span>
              <span class="freight">(含运费：￥0.00)</span>
            </td>
          </div>
          <div th:if="${vs2.count==1 && o.status != 6  }">
            <td width="120px" rowspan="${o.totalNumber}">

              <div th:if ="${o.status == 4 }">
                <a th:href="@{'confirmPay?oid='+${o.orderCode}}" class="order-button blue">确认收货</a>
              </div>
              <div th:if ="${o.status== 1 }">
                <a th:href="@{'pay?oid='+${o.orderCode}}" class="order-button blue">付款</a>
              </div>

              <div th:if ="${o.status== 2 }">
                <a href="#nowhere" class="order-button white">待发货</a>
                <a th:href="@{'deliver?oid='+${o.orderCode}}" class="order-button blue">自己发货</a>
              </div>
              <div th:if="${o.status== 5 }">
                <a th:href="#nowhere" class="order-button white">完成订单</a>
              </div>
            </td>
          </div>


          <div th:if="${o.status == 5 }">
            <td width="120px" >
              <a href="comment?oiid=${oi.id}" class="order-button white">评价</a>
            </td>
          </div>
        </tr>

    </table>
  <div class="modal" tabindex="-1" role="dialog" id="confirmModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-title">删除宝贝</div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <div class="confirm-content">确认要删除该宝贝吗？</div>
        <div class="button-group">
          <button class="yes" id="confirmDelete">确定</button>
          <button class="no" id="cancelDelete">取消</button>
        </div>
      </div>
    </div>
  </div>
</main>
<th:block th:include="include :: footer" />
</body>
</html>